<template>
  <div class="wrapper">
    <div class="referrer" v-if="user.referrer0">
      <div class="item">
        <div class="left">我的供货商:</div>
        <div class="right">{{ user.referrer0.nickname }}</div>
      </div>
      <div class="item">
        <div class="left">供货商ID:</div>
        <div class="right">{{ user.referrer0.id }}</div>
      </div>
      <div class="item">
        <div class="left">供货商手机:</div>
        <div class="right" @click="call">{{ user.referrer0.mobile }} <span>点击拨打</span></div>
      </div>
    </div>
    <div class="ops">
      <div class="item" :class="{'disabled' : !user.referrer0}" @click="stock">进货</div>
      <div class="item" :class="{'disabled' : +user.level < 201}" @click="sell">卖货</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['user'],
  methods: {
    call() {
      window.location.href = 'tel://' + this.user.referrer0.mobile
    },
    stock() {
      if (this.user.referrer0 && this.user.referrer0.id) {
        this.$router.push('/service/stock')
      }
    },
    sell() {
      if (+this.user.level >= 201) {
        this.$router.push('/service/sell')
      }
    },
  },
  created() {
    // console.log(this.user)
  }
}
</script>

<style scoped lang="stylus">
.wrapper
  //background red
  margin 0 10px
  .referrer
    background white
    margin-bottom 10px
    border-radius 10px
    padding 10px
    .item
      display flex
      height 20px
      line-height 20px
      .left
        width 80px
        padding-right 20px
        text-align right
      .right
        flex 1
        text-align left
        span
          color #ccc
          margin-left 5px
  .ops
    display flex
    justify-content space-between
    .item
      width 42%
      background white
      border-radius 10rpx
      padding 10px
      height 30px
      line-height 30px
      color #333
      font-weight 700
      border 1px solid #ccc
      font-size 18px
      &.disabled
        font-weight normal
        color #ccc
        border-color #fff
</style>
